/**
 * @description  登录总次数趋势图
 * @author zls
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { XYAxisChartsC } from '../../../comps';
import style from './index.less';

class LoginTotalTimesTrend extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }
  componentDidMount() {
    const { args } = this.props;
    this.getData(args);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { args, timeStamp } = nextProps;
    if (JSON.stringify(args) !== JSON.stringify(this.props.args) || timeStamp !== this.props.timeStamp) {
      const { dispatch } = this.props;
      dispatch({
        type: 'visitStatisticsM/save',
        payload: { totalNumOfLogins: { xAxis: [], series: undefined } },
      });
      this.getData(args);
    }
  }

  getData = (params) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'visitStatisticsM/getTotalNumOfLogins',
      payload: params,
    });
  };
  changeSeries1 = (series1) => {
    const arr = [];
    if (series1 && series1.length) {
      series1.map((item) => {
        if (item == null) {
          arr.push(item);
        } else {
          arr.push(Number((Number(item.substr(item.length - 2, item.length - 1)) / 60).toFixed(1)) + Number(item.substr(0, 2)));
        }
      });
    }
    return arr;
  };

  render() {
    const {
      visitStatisticsM: { totalNumOfLogins },
    } = this.props;
    const { xAxis, series, total = 0 } = totalNumOfLogins;

    return (
      <div className={style.body_area}>
        <div style={{ textAlign: 'center', marginBottom: '20px' }}>累计登录次数：{total}</div>
        <div>
          <XYAxisChartsC
            type='line'
            series={series}
            xAxis={xAxis}
            toolTipFormat={(params) => {
              let index = 0;
              params.map((item) => {
                index = item.dataIndex;
              });
              const data = series[0].data;
              return params[0].value == undefined
                ? `<div style="font-size:14px">${params[0].name}</div>` + `<div style='font-size:14px;margin-top:3px';height:10px>无访问记录</div>`
                : `<div style="font-size:14px">${params[0].name}</div>` + `<div style='font-size:14px;margin-top:3px';height:10px>登录次数：${data[index]}</div>`;
            }}
            dataZoom={true}
            yAxisUnit={['次数']}
            height='310px'
          />
        </div>
      </div>
    );
  }
}
export default connect(({ visitStatisticsM }) => ({
  visitStatisticsM,
}))(LoginTotalTimesTrend);
